<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 放搜索条件 -->
                <el-form :inline="true">
                    <el-form-item label="患者姓名">
                        <el-input placeholder="请输入患者姓名" clearable="" v-model="patientSurgeryForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="医生姓名">
                        <el-input placeholder="请输入医生姓名" clearable="" v-model="patientSurgeryForm.docName"></el-input>
                    </el-form-item>
                    <el-form-item label="手术状态">
                        <el-select v-model="patientSurgeryForm.status" clearable="">
                            <el-option v-for="surgery in surgeryStatus" :key="surgery.id" :value="surgery.id"
                                :label="surgery.name">{{ surgery.name }}</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryList">查询</el-button>
                    </el-form-item>
                </el-form>


            </el-col>

        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放表格 -->
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="id" label="编号" width="60%"></el-table-column>
                    <el-table-column prop="sdNo" label="申请编号" width="200px"></el-table-column>
                    <el-table-column prop="sdCaseId" label="患者id" v-if="false" ></el-table-column>
                    <el-table-column prop="name" label="患者姓名" ></el-table-column>
                    <el-table-column prop="docName" label="主治医生"></el-table-column>
                    <el-table-column prop="sdSurgicalName" label="手术名称"></el-table-column>
                    <el-table-column prop="sdSurgicalPrice" label="手术价格"></el-table-column>
                    <el-table-column prop="sdDate" label="手术时间"></el-table-column>
                    <el-table-column prop="sdStatus" label="手术状态">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.sdStatus == '0' ? 'danger' : 'success'" disable-transitions>
                                {{ scope.row.sdStatus == 0 ? '等待中' : '手术完成' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="warning" icon="el-icon-position" :disabled="scope.row.sdStatus == 1"
                                @click="complete(scope.row)">
                                手术完成
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[10, 15, 20]">
                </el-pagination>

            </el-col>
        </el-row>
    </div>

</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            surgeryStatus: [
                { id: 0, name: "等待中" },
                { id: 1, name: "手术已完成" }
            ],
            patientSurgeryForm: {
                name: "",
                docName: "",
                status: ""
            }
        }
    },
    methods: {
        nextPage(val) {
            //用户点击下一页触发
            this.pageNum = val;
            this.queryList();
        },
        prePage(val) {
            //上一页
            this.pageNum = val;
            this.queryList();
        },
        currentPage(val) {
            //当前页
            this.pageNum = val;
            this.queryList();
        },
        sizeChange(val) {
            this.pageNum = 1
            this.pageSize = val;
            this.queryList();
        },
        queryList() {
            let pageparam = {}
            pageparam.pageNum = this.pageNum
            pageparam.pageSize = this.pageSize
            pageparam.param = this.patientSurgeryForm
            this.$axios.post("api/patientsurgery/querylist", pageparam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        this.tableData = res.data.data.list
                    }
                })
        },
        complete(val) {
            this.$axios.post("api/patientsurgery/updatestatus",val)
                .then(res => {
                    if (res.data.code == 200) {
                        this.queryList()
                    }
                })
        },
    },
    created() {
        this.queryList()
    }

}
</script>

<style scoped></style>